<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/swiper-3.3.1.min.css">
    <style>
        *{
            padding:0;
            margin:0;
        }
        /*.swiper-container {*/
            /*!*width: 1279px;*!*/
            /*height: 603px;*/
        /*}*/
    </style>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="swiper-container">

    <div class="header">
        <div class="headerTop">
            <div class="timeEnd" id="timer">2016年还剩0天0小时0分钟0秒</div>
            <div class="weather" id="weather">
                <span id="time"></span>
                <span id="daypic"></span>
                <span id="nigpic"></span>
                <span id="wea"></span>
            </div>
        </div>
    </div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">

            <div class="box1">
                <h1>B O X 1</h1>
                <ul class="tab">
                    <li>one</li>
                    <li>two</li>
                    <li>three</li>
                    <li>four</li>
                </ul>
                <ul class="tabCon">
                    <li>
                        <div>this is tabCon A-1</div>
                        <div>this is tabCon A-2</div>
                        <div>this is tabCon A-3</div>
                        <div>this is tabCon A-4</div>
                    </li>
                    <li>
                        <div>this is tabCon B-1</div>
                        <div>this is tabCon B-2</div>
                        <div>this is tabCon B-3</div>
                        <div>this is tabCon B-4</div>
                    </li>
                    <li>
                        <div>this is tabCon C-1</div>
                        <div>this is tabCon C-2</div>
                        <div>this is tabCon C-3</div>
                        <div>this is tabCon C-4</div>
                    </li>
                    <li>
                        <div>this is tabCon D-1</div>
                        <div>this is tabCon D-2</div>
                        <div>this is tabCon D-3</div>
                        <div>this is tabCon D-4</div>
                    </li>
                </ul>
                <div class="teckShow">
                    <ul>
                        <li><h2>相关总结</h2></li>
                        <li>mouseenter</li>
                        <li>mouseleave</li>
                        <li>animate()/stop()</li>
                        <li>伸缩布局</li>
                        <li>文字阴影</li>
                        <li>盒子阴影</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="swiper-slide">

            <div class="box2">
                <h1>B O X 2</h1>
                <ul>
                    <li>
                        <div></div>
                    </li>
                    <li>
                        <div></div>
                    </li>
                    <li>
                        <div></div>
                    </li>
                    <li>
                        <div></div>
                    </li>
                </ul>
                <div class="teckShow">
                    <ul>
                        <li><h2>相关总结</h2></li>
                        <li>2D动画</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="swiper-slide">

            <div class="box3">
                <h1>B O X 3</h1>
                <ul class="conUl">
                    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
                    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                </ul>
                <ul class="pointUl">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="playBut preBut"> < </div>
                <div class="playBut nextBut"> > </div>

                <div class="teckShow">
                    <ul>
                        <li><h2>相关总结</h2></li>
                        <li>轮播图无缝衔接思想</li>
                        <li>animate()自定义动画函数</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="swiper-slide">

            <div class="box4">
                <h1>B O X 4</h1>
                <div class="shadowBox">
                    <div class="mask"></div>
                    <img class="bigImg" src="images/a.jpg" alt="" width=400><br>
                </div>
                <div class="magnify"></div>
                <ul class="imgUl">
                    <li><img src="images/a.jpg" width=100></li>
                    <li><img src="images/b.jpg" width=100></li>
                    <li><img src="images/c.jpg" width=100></li>
                    <li><img src="images/d.jpg" width=100></li>
                </ul>
                <div class="teckShow">
                    <ul>
                        <li><h2>相关总结</h2></li>
                        <li>拖拽的实现</li>
                        <li>DOM元素位置以及宽高</li>
                        <li>的综合应用</li>
                        <li>show()/hide()</li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="swiper-slide">

            <div class="box5">
                <h1>B O X 5</h1>
                <div class="box5Con">
                    <div class="leftSide">
                        <ul>
                            <li>2D</li>
                            <li>3D</li>
                            <li>动画</li>
                            <li>canvas</li>
                        </ul>
                    </div>
                    <div class="rightSide">
                        <ul>
                            <li class="2d">
                                <div class="box">
                                    <img src="./images/pk1.png" alt="">
                                    <img src="./images/pk1.png" alt="">
                                    <img src="./images/pk1.png" alt="">
                                    <img src="./images/pk1.png" alt="">
                                    <img src="./images/pk1.png" alt="">
                                    <img src="./images/pk1.png" alt="">
                                </div>
                                <div class="tdBox2">
                                    <img src="images/dfc.gif" alt="">
                                </div>
                            </li>
                            <li class="3d">
                                <div class="tirdBox">
                                    <div class="tirD1">上</div>
                                    <div class="tirD2">下</div>
                                    <div class="tirD3">左</div>
                                    <div class="tirD4">右</div>
                                    <div class="tirD5">前</div>
                                    <div class="tirD6">后</div>
                                </div>
                            </li>
                            <li class="animation">
                                <ul class="universe">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li>
                                        <span></span>
                                    </li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </li>
                            <li class="canvas">
                                <canvas id="canvas" width=400 height=400></canvas>
                                <canvas id="canvasT" width=400 height=400></canvas>

                            </li>
                        </ul>
                    </div>
                    <div class="teckShow">
                        <ul>
                            <li><h2>相关总结</h2></li>
                            <li>左边栏固定</li>
                            <li>右边栏自适应布局</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide">

            <div class="box6">
                <h1>B O X 6</h1>
                <div class="box6Con">
                    <div class="box6Right">
                        <div id="topbox" class="topbox">
                        </div>
                    </div>
                    <div class="box6Left">
                        <select name="" id="province"></select>
                        <select name="" id="city"></select>
                    </div>
                    <br>
                    <div class="box6Left">
                        <div id="odds"></div>
                        <div id="buycar"></div>
                    </div>
                    <div class="teckShow">
                        <ul>
                            <li><h2>相关总结</h2></li>
                            <li>二级省市联动</li>
                            <li>模拟购物车逻辑</li>
                            <li>随机位置+拖动</li>
                            <li>优雅的代码：</li>
                            <li>对象+构造函数</li>
                            <li>沙箱模式</li>
                            <li>$.extend()</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
<!--<script src="lib/jquery-1.12.2.min.js"></script>-->
<script src="lib/swiper-3.3.1.min.js"></script>
<script src="lib/swiper-3.3.1.min.js"></script>

<script src="lib/jquery-1.12.2.min.js"></script>
<script src="lib/seajs-3.0.0/dist/sea.js"></script>
<script>
    seajs.use("./js/run.js")
</script>
</body>
</html>